import * as echarts from "echarts";
import icon12 from "@/assets/imgs/icon-hom1/icon-12.webp";
import iconBarTop from "@/assets/imgs/icon-bar-top.svg";

import { useCommonStore } from "@/stores/common";
const { setGlobalData } = useCommonStore();
export const barChart = () => {
  const data = [
    { label: "独居", value: "103746" },
    { label: "空巢", value: "129471" },
    { label: "与子女同住", value: "139425" },
    { label: "其他", value: "18413" },
  ];
  const d = data.map((item) => item.label);
  const v = data.map((item) => {
    const v = +item.value / 10000;
    return v.toFixed(2);
  });

  let dataZoomMove = {
    start: 0,
    end: 5,
  };
  let dataZoomMoveTimer = null;
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      bottom: "0%",
      left: "0%",
      top: "10%",
      right: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        data: d,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: "bottom",
          lineHeight: 36,
          margin: 2, //刻度标签与轴线之间的距离
          color: "#D8F0FF",
          fontSize: 14,
          fontWeight: 400,
          formatter: function (value) {
            if (value !== undefined) {
              if (value.length > 9) {
                // 超出5个字符显示省略号
                return `${value.slice(0, 9)}...`;
              }
              return value;
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "category",
        data: d,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: "bottom",
          lineHeight: 34,
          margin: 2,
          formatter: function (value) {
            let k = d.indexOf(value);
            let index = k;
            return `{a|${v[index]}}`;
          },
          rich: {
            a: {
              color: "#D8F0FF",
              fontSize: "14",
              fontWeight: 500,
              padding: [4, 0, 0, 0],
              fontFamily: "DOUYU",
            },
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: v,
        type: "bar",
        barWidth: 4,
        showBackground: true,
        backgroundStyle: {
          color: "#242A36",
          borderRadius: 50,
        },
        itemStyle: {
          z: 0,
          zlevel: 0,
          borderRadius: 50,
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "#10274B" },
            { offset: 1, color: "#1978E5" },
          ]),
        },
      },
    ],
  };
  return option;
};

export const barChartTwo = () => {
  const d = {
    玄武区: "123701",
    秦淮区: "220854",
    建邺区: "106500",
    鼓楼区: "214896",
    雨花台区: "89811",
    栖霞区: "142489",
    江宁区: "181118",
    浦口区: "71822",
    六合区: "123207",
    溧水区: "100800",
    高淳区: "108312",
    江北新区: "209088",
  };
  const payload = {
    id: "",
    data: {
      title: ["老年人户籍人口"],
      x: Object.keys(d),
      data1: Object.values(d).map((item) => {
        const num = +item / 10000;
        return num.toFixed(2);
      }),
    },
  };

  const x = payload.data.x || [];
  const data1 = payload.data.data1 || [];
  const title = payload.data.title || [];

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: 35,
      left: 15,
      right: 15,
      bottom: 20,
      // 是否包含文本
      containLabel: true,
    },
    xAxis: {
      data: x,
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#4176a3",
          width: "0.5", //坐标线的宽度
        },
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff", //底部文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#294358",
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "transparent", //左边框颜色
          },
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "#294358",
          },
          show: true,
        },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 12,
          textStyle: {
            color: "#ADD6FF", //左文字颜色
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(21,136,209,0)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1978e51a", //渐变1
            },
            {
              offset: 1,
              color: "#1978e5", //渐变2
            },
          ]),
        },
        data: data1,
        z: 0,
        zlevel: 0,
      },
      {
        type: "pictorialBar",
        itemStyle: {
          color: "#166ED1", //数据的间隔颜色
        },
        symbolRepeat: "true",
        symbolMargin: 1,
        symbol: "rect",
        symbolSize: [20, 4],
        data: data1,
        z: 1,
        zlevel: 0,
        tooltip: {
          show: false
        },
        label: {
          show: true,
          position: "top",
          fontSize: 14,
          color: "#fff", //柱状顶部文字颜色
          formatter: function (params) {
            return params.data;
          },
        },
      },
    ],
  };

  return option;
};

export const lineChartOne = () => {
  let data = [
    { date: "2019", value: 1527762, value2: 1824600 },
    { date: "2020", value: 1594296, value2: 1824600 },
    { date: "2021", value: 1628635, value2: 1824600 },
    { date: "2022", value: 1703039, value2: 1883680 },
    { date: "2023", value: 1812133, value2: 1990673 },
  ];
  const dataSource = [
    ["日期", "户籍老人", "常住老人"],
    ...data.map((item) => {
      const getV = (v) => {
        return (v / 10000);
      };
      return [
        item.date,
        getV(item.value).toFixed(2),
        getV(item.value2).toFixed(2),
      ];
    }),
  ];

  let seriesArr = [];
  let list = [
    {
      name: "户籍老人",
    },
    {
      name: "常住老人",
    },
  ];
  let colorArr = ["7, 201, 242", "23, 117, 224"];
  list.forEach((val, index) => {
    seriesArr.push({
      name: val.name,
      type: "line",
      symbolSize: 6,
      symbol: "none",
      smooth: true, // 平滑曲线
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: `rgba(${colorArr[index]},.2)`,
            },
            {
              offset: 1,
              color: "rgba(255, 255, 255,0)",
            },
          ],
          false
        ),
      },
      itemStyle: {
        color: `rgb(${colorArr[index]})`,
      },
      lineStyle: {
        width: 2,
        shadowColor: `rgba(${colorArr[index]}, .2)`,
        shadowBlur: 4,
        shadowOffsetY: 25,
      },
    });
  });
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      top: 20,
      icon: "rect",
      orient: "horizontal",
      itemWidth: 25,
      itemHeight: 4,
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: 600,
      },
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "6%",
      top: "18%",
      containLabel: true,
    },
    dataset: {
      source: dataSource,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        textStyle: {
          fontSize: 12,
          color: "#D8F0FF",
          fontWeight: 600,
        },
      },
    },
    yAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "#294358",
          },
          show: true,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#D8F0FF",
            fontWeight: 600,
          },
        },
      },
    ],
    series: seriesArr,
  };
  return option;
};

export const barChart12 = (vdata?: any, type?: any) => {
  let columnArr = ["地区", "床位数量", "机构数量"];
  if (type == 1) {
    columnArr = ["地区", "机构数量", "床位数量"];
  } else {
    columnArr = ["地区", "设施数量", "日间照料床位数量"];
  }
  const source = [
    columnArr,
    ...vdata.map((item) => {
      return [item.label, item.value, item.value2];
    }),
  ];

  const markPoint = vdata.map((item) => {
    return {
      z: 2,
      xAxis: item.label,
      yAxis: item.value,
      type: "scatter",
      valueIndex: 0,
      symbolOffset: ["0%", "-5%"],
      symbolSize: 40,
      symbol: `image://${iconBarTop}`,
      itemStyle: {
        borderWidth: 0,
        opacity: 1,
        color: "#000",
      },
    };
  });
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: 35,
      left: 15,
      right: 15,
      bottom: 20,
      // 是否包含文本
      containLabel: true,
    },
    legend: {
      textStyle: {
        color: "rgba(255, 255, 255, 0.65)",
      },
      itemWidth: 25,
      itemHeight: 4,
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff", //底部文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        // name: "床位数量",
        type: "value",
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)", // y 轴标注颜色
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "rgba(255, 255, 255, 0.15)",
          },
          show: false,
        },
      },
      {
        // name: "机构数量",
        type: "value",
        axisLabel: {
          formatter: "{value}",
          color: "rgba(255, 255, 255, 0.65)", // y 轴标注颜色
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "#294358",
          },
          show: true,
        },
      },
    ],
    dataset: {
      source: source,
    },
    series: [
      {
        type: "bar",
        itemStyle: {
          barBorderRadius: [30, 30, 0, 0],
          color: {
            type: "linear",
            x: 0, // 右
            y: 0, // 下
            x2: 0, // 左
            y2: 1, // 上
            colorStops: [
              {
                offset: 0,
                color: "rgba(74, 181, 238, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(12, 43, 68, 1)", // 100% 处的颜色
              },
            ],
          },
        },
        barWidth: 8,
        yAxisIndex: 1,
        markPoint: {
          data: markPoint,
        },
      },
      {
        type: "line",
        symbol: "rect",
        smooth: true, // 平滑曲线
        itemStyle: {
          color: "rgba(24, 117, 222, 1)",
        },
      },
    ],
  };
  return options;
};

export const RateChart = () => {
  const datas = {
    value: 63.5,
    text: "在线率",
  };
  const option = {
    series: [
      {
        name: "pie",
        type: "pie",
        roundCap: true,
        clockWise: true,
        startAngle: 260,
        labelLine: {
          show: false,
        },
        radius: ["40%", "60%"],
        hoverAnimation: false,
        center: ["50%", "45%"],
        data: [
          {
            value: datas.value,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: "#F85608FF",
                  },
                  {
                    offset: 1,
                    color: "#F9B01CFF",
                  },
                ]),
                shadowColor: "rgba(1,1,1,0.5)",
                shadowBlur: 1,
              },
            },
          },
          {
            value: 100 - datas.value,
            name: "",
            itemStyle: {
              normal: {
                color: "#392420FF", // 未完成的圆环的颜色
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      },
    ],
  };
  return option;
};

export const Pie3d = (pieData) => {
  return {
    pieData,
    legend: {
      show: false,
    },
  };
};

export const pieChartOrg2 = () => {
  const colors = [
    "#05D0F9FF",
    "#187AEBFF",
    "#D0DBE1FF",
    "#E8BA65FF",

    "#6DD1EAFF",
    "#1978E5FF",
    "#ECB205FF",
    "#9C30F1FF",
    "#7BC17FFF",
    "#E8BA65FF",
  ];
  const pieData = [
    {
      name: "一级",
      value: 233,
    },
    {
      name: "二级",
      value: 2,
    },
    {
      name: "三级",
      value: 2,
    },
    {
      name: "四级",
      value: 6,
    },
  ];
  const _data = (opacity?: any) => {
    return pieData.map((item, index) => {
      return {
        value: item.value,
        name: item.name,
        itemStyle: {
          color: colors[index],
          opacity: opacity || 1,
        },
      };
    });
  };
  const option = {
    legend: {
      show: false,
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["65%", "85%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        z: 10,
        itemStyle: {
          // borderWidth: 5,
          borderColor: "#0B1C2BFF",
        },

        data: _data(),
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
      },
      {
        type: "pie",
        radius: ["54%", "85%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        label: {
          show: false,
        },
        itemStyle: {
          borderWidth: 5,
          borderColor: "#0B1C2BFF",
        },
        data: _data(0.3),
        labelLine: {
          show: false,
        },
      },
    ],
  };
  return option;
};

export const pieChartOrg3 = (type?: number) => {
  const colors = [
    "#05D0F9FF",
    "#187AEBFF",
    "#D0DBE1FF",
    "#E8BA65FF",

    "#6DD1EAFF",
    "#1978E5FF",
    "#ECB205FF",
    "#9C30F1FF",
    "#7BC17FFF",
    "#E8BA65FF",
  ];

  const sourceData =
    type == 1
      ? [
        {
          name: "事业单位",
          value: 10.47,
        },
        {
          name: "民非",
          value: 62.09,
        },
        {
          name: "企业",
          value: 27.44,
        },
      ]
      : [
        {
          name: "公办公营",
          value: 4.3,
        },
        {
          name: "公办民营",
          value: 46.04,
        },
        {
          name: "民营",
          value: 49.66,
        },
      ];
  const total = sourceData.reduce((num, item) => {
    num += item.value;
    return num;
  }, 0);

  // 内环间隔距离
  const inSplitWidth = 3;
  // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
  const inSplitValue = Math.floor(total / (300 / inSplitWidth));

  // 外环间隔比内环间隔大的值
  const itemSplitWidth = 2;
  // 外环间隔距离
  const outSplitWidth = inSplitWidth + itemSplitWidth;
  // 为了实现外环间隔距离，需要额外插入的数值。
  const outSplitValue = Math.floor(total / (300 / outSplitWidth));

  // 内环数据的总数
  const valueTotal = total + inSplitValue * sourceData.length;

  function getTextAngle(currentAngle, angle) {
    currentAngle = currentAngle + angle;
    if (currentAngle <= 90) {
      return -currentAngle;
    } else if (currentAngle <= 180 && currentAngle > 90) {
      return 180 - currentAngle;
    } else if (currentAngle < 270 && currentAngle > 180) {
      return 180 - currentAngle;
    } else if (currentAngle < 360 && currentAngle >= 270) {
      return 360 - currentAngle;
    }
  }

  // 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
  const valueData = sourceData.reduce((arr, item) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;
    arr.push(
      {
        name: item.name,
        value: item.value,
        itemStyle: {},
        label: {
          lineHeight: 80,
          rotate: getTextAngle(currentAngle, angle),
        },
      },
      {
        name: "",
        value: inSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      }
    );
    return arr;
  }, []);

  const itemReduced = outSplitValue - inSplitValue;
  // 外环数据
  const outValueData = sourceData.reduce((arr, item, index) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;

    arr.push(
      {
        name: item.name,
        value: item.value - itemReduced,
        label: {
          color: "rgb(160, 60, 60)",
          position: "inside",
          align: "center",
          rotate: getTextAngle(currentAngle, angle),
        },
      },
      {
        name: "",
        value: outSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        }
      }
    );

    return arr;
  }, []);

  const option = {
    tooltip: {
      trigger: "item",
      zlevel: 1,
      confine: true,
      appendToBody: true,
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
      formatter: (params, ticket, callback) => {
        setGlobalData(params, "home1");
        if (params.name) {
          return `${params.name}:${params.value}%`;
        }
      },
    },
    color: colors,
    series: [
      {
        type: "pie",
        data: valueData,
        label: {
          show: false,
        },
        itemStyle: {
          opacity: 0.3,
        },
        labelLine: {
          show: false,
        },
        blur: {
          itemStyle: {
            opacity: 1,
          },
        },
        stillShowZeroSum: true,
        radius: ["60%", "80%"],
      },
      {
        type: "pie",
        startAngle: -360 * (itemReduced / 2 / valueTotal) + 90,
        radius: ["75%", "85%"],
        label: {
          show: false,
        },
        silent: false,
        labelLine: {
          show: false,
          length: 10,
        },
        data: outValueData,
      },
    ],
  };
  return option;
};

export const radarChart = () => {
  let indicator = [
    {
      name: "低保、低边缘者人",
      value: 25,
      sub: 47773,
    },
    {
      name: "经济困难老人",
      value: 66,
      sub: 676,
    },
    {
      name: "计生特扶老人",
      value: 5,
      sub: 1009,
    },
    {
      name: "百岁老人",
      value: 1,
      sub: 86,
    },
    {
      name: "特困老人",
      value: 3,
      sub: 12371,
    },
  ];
  const total = indicator.map(item=>item.sub).reduce((a,b)=>a+b)

  const option = {
    color: ["#4890B9FF", "#068AC3", "#B2782C"],
    radar: {
      center: ["50%", "50%"], // 外圆的位置
      radius: "40%",
      name: {
        formatter: function (value, indicator) {
          const pie = indicator.sub / total*100;
          return "{a|" + value + "}\n{b|" + pie.toFixed(2) + "%}";
        },
        lineHeight: 20,
        rich: {
          a: {
            color: "#D8F0FF",
            fontSize: 12,
            align: "center",
          },
          b: {
            color: "#fff",
            fontSize: 16,
            align: "center",
          },
        },
      },
      indicator: indicator.map(item=> {
        return {
          ...item,
          max: 47773,
        };
      }),
      splitArea: {
        show: true,
        areaStyle: {
          color: [
            "#0B2E42FF",
            "#0B2E42FF",
            "#0B2E42FF",
            "#0B2E42FF",
            "#0B2E42FF",
          ],
        },
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: ["#1781BA", "#1781BA"], // 分隔线颜色
          width: 1, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: "radar",
        symbolSize: 5,
        data: [
          {
            value: indicator.map((item) => item.sub),
            name: "政府购买辅助对象",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(66, 135, 175, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(44, 92, 121,1)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(33, 84, 109, 1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(33, 84, 109, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            itemStyle: {
              // 折线拐点标志的样式。
              normal: {
                // 普通状态时的样式
                lineStyle: {
                  width: 0,
                },
                opacity: 0,
              },
              emphasis: {
                // 高亮时的样式
                lineStyle: {
                  width: 0,
                },
                opacity: 0,
              },
            },
          },
        ],
      },
    ],
  };
  return option;
};

export const graphChart = () => {
  function getOption(dataList) {
    // 先找出数组的最大值，这样可以知道每个元素与最大元素的比例，方便调整尺寸的大小
    let maxValue = 1; // 防止数据全都为 0，后面会除以  maxValue，为 0 会出错
    let valueList = dataList.map((item) => item.value);
    maxValue = Math.max(maxValue, ...valueList);

    // 设定尺寸的大小
    let minSymbolSize = 60; // 最小尺寸 防止太小的情况，看情况调整
    let symbolSize = 70; // 大小
    let repulsion = symbolSize * 2; // 斥力 为了防止重叠，斥力最好大于 symbolSize

    // 可以根据数据的多少，动态调整 symbolSize 的大小
    let valueListLen = valueList.length;
    if (valueListLen < 3) {
      symbolSize = 120;
    } else if (valueListLen < 5) {
      symbolSize = 100;
    }

    repulsion = symbolSize * 2;

    // 获取要渲染的数据
    let data = dataList.map((item) => {
      // 根据比例与最小尺寸，算出每个元素的大小
      let size = Math.max(symbolSize * (item.value / maxValue), minSymbolSize);

      return {
        name: item.label,
        value: item.value,
        symbolSize: size,
      };
    });

    return {
      xAxis: {
        show: false,
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          data,
          type: "graph", // 关系图
          layout: "force", // 采用力引导布局
          force: {
            // 力引导布局相关的配置项
            repulsion, // 值越大则斥力越大 每个元素间隔越大
          },
          // 高亮状态的图形样式
          emphasis: {
            scale: 2,
          },
          // 设置 label
          label: {
            show: true,
            position: "inside",
            textStyle: {
              fontWeight: 700,
              fontSize: 14,
              color: "#fff",
            },
          },
          // 设置元素的样式
          itemStyle: {
            borderWidth: 1,
            // color: "#092D50",
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
              {
                offset: 0.2,
                color: "rgba(27, 54, 72, 0.2)",
              },
              {
                offset: 0.8,
                color: "#4B6E8C",
              },
            ]),
            opacity: 1,
            borderColor: "#4B6E8C",
            shadowBlur: 7,
            symbolOffset: 0.6,
          },
        },
      ],
    };
  }
  let demoDataList = [
    {
      label: "助餐",
      value: 200,
    },
    {
      label: "助急",
      value: 1,
    },
    {
      label: "助洁",
      value: 50,
    },
    {
      label: "助医",
      value: 100,
    },
    {
      label: "健康管理",
      value: 10,
    },
    {
      label: "助行",
      value: 10,
    },
    {
      label: "助浴",
      value: 10,
    },
  ];

  return getOption(demoDataList);
};
